<template>
  <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
    <div :class="[prefixCls + '-body']">
      <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
      <div :class="[prefixCls + '-content']">
        <time-spinner
          ref="timeSpinner"
          :show-seconds="showSeconds"
          :hours="value[0] && date.getHours()"
          :minutes="value[0] && date.getMinutes()"
          :seconds="value[0] && date.getSeconds()"
          :steps="steps"
          :disabled-hours="disabledHours"
          :disabled-minutes="disabledMinutes"
          :disabled-seconds="disabledSeconds"
          :hide-disabled-options="hideDisabledOptions"
          @on-change="handleChange"
          @on-pick-click="handlePickClick" />
      </div>
      <Confirm v-if="confirm" :clearable="clearable" @on-pick-clear="handlePickClear" @on-pick-success="handlePickSuccess" />
    </div>
  </div>
</template>
<script type="text/ecmascript-6" src="./time.js"></script>
